<!-- 首页组件-->
<template>
  <div class="home" id="home" name="home">
    <!-- 秒杀测试 -->
<!--    <my-count-down/>-->
    <!-- 放大镜效果 -->
<!--    <magnifying-glass/>-->

    <div class="menu"><!-- 导航栏 -->
      <MenuBanner :lists="applianceList2" :isMore="false"></MenuBanner>
    </div>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="500px">

        <el-carousel-item v-for="(item,index) in imgSUrl" :key="index">
          <img style="width:100%;height:100%;" :src="item" >
        </el-carousel-item>

      </el-carousel>
    </div>
    <!-- 轮播图END -->


    <div class="main-box"> <!--两个界面的展示服装+手机-->
      <div class="main" v-for="(item,index) in applianceList" :key="item.id">
 
        <div class="phone">
          <div class="box-hd"> <!--左侧分类-->
            <div class="title">{{ item.typeName }}</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to v-if="phoneList[index]">

<!--                <img :src="$target +phoneList[index].value"/>-->
<!--                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ba7c4eccf6864b9101c28d2ca9cc71e2.jpg?w=1708&h=868"/>-->
              </router-link>
            </div>
            <div class="list"> <!--右侧列表-->
              <MyList :list="item.goodsList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
/*import MagnifyingGlass from '../components/MagnifyingGlass.vue';*/
/*import MyCountDown from '../components/MyCountDown.vue';*/



export default {
  name:"Home",
  /*components: {MyCountDown, MagnifyingGlass},*/
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: [], // 家电商品列表
      applianceList2: [], // 品牌分类信息
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类
      imgSUrl:[

        "https://img.alicdn.com/imgextra/i3/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg",
          "https://img.zcool.cn/community/01fe925cef8beaa80121a4703d0047.jpg@1280w_1l_2o_100sh.jpg",
          "https://img.zcool.cn/community/01c4f157ce5eb80000018c1bd9a55a.jpg@1280w_1l_2o_100sh.jpg"
      ]
    };
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
 
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
    
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        this.accessoryList = this.chargerList;
        return;
      }
    }
  },
  created() {
    this.$axios
        .get("/home/homeCarousel", {})
        .then(res => {
          this.carousel = res.data.data.dataList;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    this.getPromo()
  },
  methods: {


    // 获取各类商品数据方法封装
    getPromo() {

      this.$axios
          .get("/home/homeGoodsList",)
          .then(res => {
            console.log(res)
            this.applianceList = res.data.data.dataList//商品类型

            this.phoneList = res.data.data.dataMap
          })
          .catch(err => {
            return Promise.reject(err);
          });
      //获取品牌分类信息表
      this.$axios
          .get("/home/homeGoodsBrandList",)
          .then(res => {
            console.log(res)
            this.applianceList2 = res.data.data.dataList//商品类型


          })
          .catch(err => {
            return Promise.reject(err);
          });
    }

  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>